ShopifyにGTM経由でMixpanelを入れてイベントデータの計測をしてみた
ECサイトを簡単に開設できるShopifyに分析ツールのMixpanelをGTM経由で入れてイベントデータの計測をしてみました。
本記事では、その手順について紹介します。
Mixpanelについて
当記事はShopifyとMixpanelをすでにご存知の方向けの記事となります。
「Mixpanelとは何ぞや？」と疑問を持たれている方は以下記事をご覧ください。
この記事で学べること
本記事では以下のことをお伝えさせていただきます。
- GTMでShopifyへのMixpanel組み込み
- Mixpanelへのユーザー情報(IDと名前)の送信
- Mixpanelへ訪問ページURLの送信
Mixpanelの組み込みはソース内に直接書き込むやり方ではなく、GTMを使った連携についての手順でお伝えします。
ShopifyにGTMタグの組み込み
GTM管理画面でGTMコードの発行
GTMでコンテナを作成するとGTMコードが発行されます。
以下のGTMタグマネージャーをインストールからGTMタグをコピーします。
発行されたGTMの以下コードを指定の部分に書き込むためコピーします。
Shopify管理画面でテーマのコードを編集
コピーしたGTMのタグをShopifyへペーストします。
Shopifyの管理画面から入りオンラインストア>テーマ>コードを編集に遷移します。
Shopifyのtheme.liquidとpassword.liquidにGTMのコードをペーストします。
今回はさらに、Shopifyのユーザー情報である個別IDと姓名をMixpanelに送信するため、datalayerの記述も追加します。
追加するのは以下の記述です。
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'ecommerce': '{{ customer.id }}',
'firstname': '{{ customer.first_name }}',
'lastname': '{{ customer.last_name }}'
});
</script>
追加する場合はhead内に加えたGTMのコードの上に追加します。
Shopifyの購買完了ページにも計測設定
テーマのコード編集ではShopify Plusの契約プランを除き、購買完了ページの計測ができません。
そのため、こちらではベーシックプランなどの方でもできるGTM組み込み手順をお伝えします。
Shopifyの管理画面>チェックアウトとアカウントの項目内にある追加スクリプトにGTMコードを貼り付けます。
上記コードを貼り付け後、保存をすると購買完了ページでのGTM計測ができるようになります。
GTM画面での設定
GTMコードをShopifyサイトに組み込んだ後はGTMの管理画面でMixpanelタグの設定をします。
テンプレートの設定
テンプレートでMixpanelタグの作成を行います。
テンプレートの作成については以下記事のインストール方法で詳細な手順が書いてありますので、ここでは割愛します。
変数の設定
datalayerで使うユーザー情報の変数を作成します。
作成する変数は以下３つです。
- ecommerce…ユーザーを一意に識別するID
- firstname…ユーザーの苗字
- lastname…ユーザーの名前
作成手順は変数>新規をクリック。
変数の設定でデータレイヤーの変数を選択します。
選択後は変数名の設定を行います。
タグの設定
変数を設定した後はタグの設定です。
今回計測するタグを以下3つ作成します。
- mixpanel-identify…ユーザーIDの計測タグ
- mixpanel-page…訪問ページの計測タグ
- mixpanel-people…ユーザーの苗字と名前
mixpanel-identifyの作成例
タグ>新規をクリック。
タグタイプでMixpanelを選択。
タグの設定では各項目について以下を埋めます。
- Project Token→Mixpanel設定画面にあるProject Token
- Tag Type→identify
- Unique ID (Optional)→データレイヤーの変数で決めたecommerceの変数名
トリガーの選択ではInitialization - All Pagesを選択します。
mixpanel-pageの作成例
タグ>新規をクリック。
タグタイプでMixpanelを選択。
タグの設定では各項目について以下を埋めます。
- Project Token→Mixpanel設定画面にあるProject Token
- Tag Type→-Track
- Event Name→page_open
- Parameter Name→page_url
- Value→{{Page URL}}
トリガーの選択ではAll Pagesを選択します。
mixpanel-peopleの作成例
タグ>新規をクリック。
タグタイプでMixpanelを選択。
タグの設定では各項目について以下を埋めます。
- Project Token→Mixpanel設定画面にあるProject Token
- Tag Type→-People
- Command→people.set
- Property Name→$first_name
- Value→データレイヤーの変数で決めたfirstnameの変数名
- Property Name→$last_name
- Value→データレイヤーの変数で決めたlastnameの変数名
トリガーの選択ではInitialization - All Pagesを選択します。
GTMの公開後はMixpanelをチェック
設定したGTMを公開後にMixpanelでデータの計測ができているか確認します。
Eventsを見るとpage_openとIdentifyの2つのイベントが計測されています。
page_openをクリックするとユーザーの計測されたページやOS、国、デバイスなどが確認できます。
さらに一意のIDであるDistinct IDをクリックするとユーザープロフィールの画面に遷移します。
こちらを見ると「masao kunisaki」という名前も計測できていることが確認できました。
Reports>Insightsを見るとpage_openの日別推移グラフが見れます。
計測は設定後の日付から取得が可能になります。
購買完了ページ訪問と全体ページ訪問の比較もできたりします。
まとめ
以上、ShopifyとMixpanelのGTM連携の計測について紹介させていただきました。
ShopifyではIDや名前などすでに決められた変数があるので、それらをGTMで計測する際にデータレイヤーで変数化するのが少し手間かなと感じました。
今回計測できるようになった設定でどのような分析ができるかを次回以降お伝えできればと思います。
